<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
	<head>
		<base href="<%=basePath%>">
		<meta charset="utf-8">
		<title>小程序助手</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<!-- <link rel="stylesheet" href="static/mobile/css/mui.min.css"> -->
		<link rel="stylesheet" href="static/mobile/css/index.css">
		<script type="text/javascript" src="http://libs.useso.com/js/jquery/2.1.1/jquery.min.js" ></script>
	  	<script type="text/javascript" src="static/mobile/js/jquery.form.min.js"></script>
	  	<script type="text/javascript" src="static/mobile/js/jquery.scrollLoading.js"></script>
	</head>
	<body>
		<header class="header">
			<div class="logo"><img src="static/mobile/img/logo.png"></div>
			<a href="javascript:showsearch();">
			<div class="search-icon" ><i></i></div></a>
		</header>
		<div class="tag" id="icon">
<%-- 				<ul>
					<li class="active"><a href="javascript:sendData()">全部</a></li>
					<li class=""><a href="javascript:sendData(0)">热门排行</a></li>
					<c:forEach items="${varList}" var="var" varStatus="vs">
						<li class=""><a href="javascript:sendData(${var.ID })">${var.NAME}</a></li>
					</c:forEach>
				</ul> --%>
			
			<span class="span_click" name="">全部</span>
			<span name="0">热门排行</span>
			<c:forEach items="${varList}" var="var" varStatus="vs">
				<span name="${var.ID }">${var.NAME}</span>
			</c:forEach>
		</div>
		
		 <form  action="app/mobileIndexList" method="post" id="list_form">
		<div class="miniapp-list-content">
		</div>
		
		 <input type="hidden" id="COLUMN_ID" name="COLUMN_ID"  value=""/>
		 <input type="hidden" id="currentPage" name="currentPage"  value="1"/>
		 <input type="hidden" id="showCount" name="showCount"  value="20"/>
		</form>
	
	
		<div id="mobileprodList11" class="content">
		<ul id="mobileprodList"></ul>
		</div>
		<script>
			var curPageNo=1;
			$(function(){
			 $("#icon span").bind("click",function(){
				$(this).addClass("span_click").siblings().removeClass("span_click");
				var cid=$(this).attr("name");
				curPageNo=1;
				//$("body,html").animate({scrollTop:0},200);
				//$("body,html").animate({scrollTop:top},0);
				$("#currentPage").val(curPageNo);
				sendData(cid);
			 });
			 
			 $("body,html").animate({scrollTop:top},0);
			 curPageNo=1;
			 var cid= sessionStorage.getItem("FH_COLUMN_ID");
			 $("#currentPage").val(curPageNo);
			 sendData(cid);
			 var nums = $("#icon span").length
			 for(var i=0;i<nums;i++){	
			 	var e =$("#icon span").eq(i);
			 	if(e.attr("name") == cid){
			 		e.addClass("span_click").siblings().removeClass("span_click");
			 	}
			 }
			 sessionStorage.setItem("FH_COLUMN_ID", "");
			});
			
			$(window).scroll(function(){
        	if ($(document).height() - $(this).scrollTop() - $(this).height()<50){
				curPageNo=curPageNo+1;
				var totalPage = $("#totalPage").val();
				if(curPageNo<=totalPage){
        			nextPage(curPageNo);
				}
       		 }
    		});
			
			function showsearch(){
				sessionStorage.setItem("FH_SEARCH_KEY", "");
				window.location.href="<%=basePath%>/app/mobileSearchIndex";
			}
			
			function nextPage(page){
				$("#currentPage").val(page);
				var columnid=$("#COLUMN_ID").val();
				sendData(columnid);	
			}
		
			function sendData(cid){
				$("#COLUMN_ID").val(cid);
				$("#list_form").ajaxForm().ajaxSubmit({
					  success:function(result) {
					  	if(curPageNo == 1){
					  		$("#mobileprodList").html("");
					  	}
					  	$("#mobileprodList").append(result); 
					  	
					  	if(curPageNo == 1){
					  	 var top=sessionStorage.getItem("FH_COLUMN_SCROLLTOP");
						 $("body,html").animate({scrollTop:top},0);
						 sessionStorage.setItem("FH_COLUMN_SCROLLTOP", 0);
						 }
						 
					   },
					   error:function(XMLHttpRequest, textStatus,errorThrown) {
						 return false;
					  }
				});
			}
			
			$(window).scroll(function(){
        	if ($(document).height() - $(this).scrollTop() - $(this).height()<50){
				curPageNo=curPageNo+1;
				var totalPage = $("#totalPage").val();
				if(curPageNo<=totalPage){
        			nextPage(curPageNo);
				}
       		 }
    		});
    		
			function jumpdetail(id){
				
				sessionStorage.setItem("FH_COLUMN_SCROLLTOP", document.body.scrollTop);
				var columnid=$("#COLUMN_ID").val();
				sessionStorage.setItem("FH_COLUMN_ID", columnid);
				window.location.href="<%=basePath%>/app/app_detail?ID=" + id;
			}
			$(document).ready(function(){
				var h = $("#icon").outerHeight(true);
				$(".content ul").css("padding-top",h+50);
			});
			
		</script>
		
		<iframe id="stat" style="display:none" src="static/weixin/ymstat.jsp"></iframe>
	</body>

</html>
